import React, {Component} from 'react';
import {Button, Layout, Menu, Space, Table} from 'antd';
import {StepForwardOutlined, PlusOutlined, CloseCircleFilled} from '@ant-design/icons'

let {SubMenu} = Menu;
let {Header, Content, Footer} = Layout;

class AntdPage extends Component {
  state = {
    columns: [
      {
        title: '名称',
        dataIndex: 'title',
        key: 'title'
      },
      {
        title: '评级',
        dataIndex: 'star',
        key: 'star'
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age'
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        render: (text, record) => {
          return (
            <Space>
              <Button type='danger' onClick={() => {
                console.log(text, record);
                let newArr = this.state.dataSource.filter(item => !(item.key === record.key));
                this.setState({
                  dataSource: newArr
                })
              }} icon={<CloseCircleFilled/>}>删除</Button>
              <Button type='primary' onClick={() => {
                console.log(text, record);
              }} icon={<PlusOutlined/>}>编辑</Button>
            </Space>
          )
        }
      }
    ],
    dataSource: [
      {
        key: '1',
        title: '黄晓明',
        star: '5星',
        age: '25'
      },
      {
        key: '2',
        title: '易烊千玺',
        star: '6星',
        age: '22'
      },
      {
        key: '3',
        title: '蔡徐坤',
        star: '6星',
        age: '21'
      },
    ]
  };
  handleMenu = (e) => {
    console.log(e)
  };

  render() {
    return (
      <div>
        <Header>
          <Menu theme='dark' mode="horizontal">
            <Menu.Item key='1'>
              学生页面
            </Menu.Item>
            <Menu.Item key='2'>
              教师页面
            </Menu.Item>
            <Menu.Item key='3'>
              管理员页面
            </Menu.Item>
          </Menu>
        </Header>

        <Content style={{height: '600px'}}>
          <Menu
            style={{width: '200px'}}
            onClick={this.handleMenu}
            mode='inline'
          >
            <SubMenu
              key='sub1'
              title={
                <span>
                  <StepForwardOutlined/>
                  <span>用户管理</span>
                </span>
              }
            >
              <Menu.Item key='1'>添加用户</Menu.Item>
              <Menu.Item key='2'>用户列表</Menu.Item>
              <Menu.Item key='3'>空空空</Menu.Item>
            </SubMenu>
            <SubMenu
              key='sub2'
              title={
                <span>
                  <StepForwardOutlined/>
                  <span>轮播图管理</span>
                </span>
              }
            >
              <Menu.Item key='4'>添加轮播图</Menu.Item>
              <Menu.Item key='5'>轮播图列表</Menu.Item>
              <Menu.Item key='6'>修改轮播图</Menu.Item>
            </SubMenu>
          </Menu>
          <div style={{position: 'absolute', top: '64px', left: '200px'}}>
            <Button>按钮</Button>
            <Table dataSource={this.state.dataSource} columns={this.state.columns}/>
          </div>
        </Content>
        <Footer>
          尾部 :
        </Footer>
      </div>
    );
  }
}

export default AntdPage;
